<template>
	<view class="container">
		<tui-navigation-bar :isFixed="true" :isOpacity="true" splitLine :zIndex="99999" :scrollTop="0"
			backgroundColor="#ffffff" color="#333">
			<view style="height: 40px;display: flex;align-items: center;">
				<view style="width: 15rpx;" @click="handleBack"></view>
				<u-icon name="arrow-left" size="45" color="#333" @click="handleBack"></u-icon>
			</view>
		</tui-navigation-bar>
		<view class="header">
			<view class="tips">
				举报详情
				<tui-icon name="about" color="#7D7D7D" size="36rpx"></tui-icon>
			</view>
		</view>
		<view class="content">
			<view class="group">
				<view class="group-content">
					<tui-list-view>
						<tui-list-cell padding="22rpx 0">
							<view class="list">
								<view class="label">请填写说明</view>
								<view class="input">
									<view class="">
										<u-input border="none" v-model="groupValue1" placeholder="填写说明"></u-input>
									</view>
								</view>
							</view>
						</tui-list-cell>
						<tui-list-cell padding="22rpx 0" :arrow="false">
							<view class="list">
								<view class="label">请上传图片</view>
								<view class="input">
									<view class="">
									<u-upload
									    :fileList="fileList"
									    @afterRead="handleUpload"
									    @delete="handleHeaderDel"
									    multiple
									    :maxCount="9"
									    :width="imageWidth"
									    :height="imageWidth"
									></u-upload>
									</view>
								</view>
							</view>
						</tui-list-cell>
					</tui-list-view>
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button shape="circle" color="#63D1D6" @click="handleSubmit">确认</u-button>
		</view>
	</view>
</template>

<script>
	import { to, uploadAfter, uploadFile, pxToRpx } from '../../config/utils.js';
	export default {
		data() {
			return {
				describePic: [],
				value: true,
				groupValue1: '',
				headerHeight: 64,
				isAddGroup: false,
				num: 1,
				imageWidth: 140,
			}
		},
		onLoad(params) {
			this.params = params;
			let system = getSystemInfo();
			if (system) {
				this.headerHeight = 44 + (system.statusBarHeight || 20);
			}
		},
		methods: {
			async handleUpload(file) {
				const fileData = await uploadAfter(file.file);
				let fileList = fileData?.filter(item => item.url);
				this.fileList = this.fileList.concat(fileList);
			},
			handleHeaderDel(e) {
				const { index} = e;
				let fileList = [...this.fileList];
				fileList.splice(index, 1);
				this.fileList = fileList;
			},
			async handleSubmit() {
				let params = {
					picList: this.fileList.map(item => item.url).join(','),
				};
				const [err, data] = await to(commitDynamic(params));
				if (err) {
					return uni.showToast({
						title: err?.msg || '发布动态失败',
						icon: 'none'
					})
				}
				if (data.success) {
					uni.showToast({
						title: '发布动态成功'
					})
					setTimeout(() => {
						uni.setStorageSync('__commit_success', '1');
						uni.navigateBack();
					}, 500);
				} 
			},
			handleBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		.header {
			position: relative;
			padding: 200rpx 22rpx 20rpx;
			background: #FFFFFF;
			.tips {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #464646;
				font-size: 26rpx;
			}

			.list {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 52rpx;

				.list-content {
					flex: 1;

					.label {
						color: #000000;
						font-size: 30rpx;
					}

					.tips {
						color: #D4D4D4;
						font-size: 24rpx;
					}
				}

				.list-right {
					position: relative;
				}
			}
		}

		.content {
			position: relative;

			.group {
				position: relative;

				.title {
					position: relative;
					padding: 24rpx 22rpx;
					color: #000000;
					font-size: 30rpx;
				}

				.group-content {
					position: relative;
					background: #FFFFFF;
					padding: 0 24rpx;

					.list {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-right: 70rpx;

						.label {
							position: relative;
							color: #000000;
							font-size: 30rpx;
							margin-bottom: 6rpx;
						}

						.input {
							flex: 1;
							text-align: right;
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
					}
				}
			}

			.group-btn {
				position: relative;
				padding: 28rpx 20rpx;
				color: #565656;
				font-size: 30rpx;
				height: 100rpx;

				button {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0;
					border: none;
					cursor: pointer;
					border-radius: 28rpx;
					height: 100rpx;
					background-color: #fff;
				}

				.btn {
					position: relative;

				}
			}
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 12rpx 30rpx 76rpx 16rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 2rpx solid #EBEAEC;
		}
	}
</style>